<template>
  <div class="nav-breadcrumb w100 h100">
    <div class="now-position">当前位置<span class="colon">:</span></div>
    <div class="path-list" v-for="(item, index) in nowPosition" :key="index" @click="navTo(item)">
      <div class="path">
        {{item.name}}
        <span class="separator" v-if="index !== nowPosition.length - 1">&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NavBreadcrumb',
    data () {
      return {
        nowPosition: []
      }
    },
    mounted () {
      this.freshNowPosition()
    },
    watch: {
      '$route' (to, from) {
        const position = to.meta.position
        // console.log(position)
        if (position) {
          this.nowPosition.splice()
          this.nowPosition = position
        }
      }
    },
    methods: {
      /**
       * 在当前页面刷新，从当前路由获取值
       * */
      freshNowPosition () {
        const position = this.$route.meta.position
        // console.log(position)
        if (position) {
          this.nowPosition.splice()
          this.nowPosition = position
        }
      },
      /**
       * 导航至
       * @param {JSON} item
       * */
      navTo (item) {
        if (!item.path) {
          return
        }
        this.$router.push({
          path: item.path
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-breadcrumb {
    padding-left: 25px;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #999;
    font-size: 12px;
    .now-position {
      .colon {
        margin: 0 6px 0 2px;
      }
    }
    .path-list {
      .path {
        .separator {
          margin-right: 3px;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
</style>
